<template>
  <div class="config">
    <config-grid v-show="type === 'grid'" />
    <config-node v-show="type === 'node'" :types="types" />
    <config-edge v-show="type === 'edge'" />
  </div>
</template>

<script lang="ts">
import ConfigGrid from './ConfigGrid/index.vue'
import ConfigNode from './ConfigNode/index.vue'
import ConfigEdge from './ConfigEdge/index.vue'
import FlowGraph from '@/views/flow/graph'
import './index.less'
import { defineComponent, ref, provide } from 'vue'
import { globalGridAttr } from '@/views/flow/models/global'

export default defineComponent({
  name: 'index',
  components: {
    ConfigGrid,
    ConfigNode,
    ConfigEdge
  },
  setup() {
    const type = ref('grid')
    const id = ref('')
    const types = ref('')
    // 给节点配置点击事件，配置节点属性
    const boundEvent = function (): void {
      const { graph } = FlowGraph
      graph.on('blank:click', () => {
        type.value = 'grid'
      })
      graph.on('cell:click', ({ cell }) => {
        type.value = cell.isNode() ? 'node' : 'edge'
        id.value = cell.id
        console.log(cell?.data)
        types.value = cell?.data?.type
        console.log(types.value)
      })
    }
    boundEvent()
    //注入自定义属性及节点id
    provide('globalGridAttr', globalGridAttr)
    provide('id', id)

    return {
      type,
      id,
      types
    }
  }
})
</script>

<style lang="less" scoped>
</style>
